<template>
  <div class="KPIAnalysis_wrap">
    <span class="mr-8">日期</span>
    <el-date-picker
      class="mr-8 update-el-date"
      v-model="dateTime"
      value-format="yyyy-MM"
      format="yyyy-MM"
      type="month"
      @change="changeDate"
      placeholder="选择日期"
    >
    </el-date-picker>
    <el-button type="primary" @click="kpiReport(dateTime)">查询</el-button>
    <div class="info_top">
      <div class="info_item_wrap mr16">
        <div class="item_1_wrap">
          <div class="title">本月完成指标店铺数</div>
          <div class="number">{{ kpiReportList.monthComplete || 0 }}</div>
        </div>
        <div class="item_2_wrap">
          <div class="title">本月未完成指标店铺数</div>
          <div class="number">{{ kpiReportList.monthNotComplete || 0 }}</div>
        </div>
      </div>
      <div class="info_item_wrap mr16">
        <div class="item_1_wrap">
          <div class="title">三季度完成指标店铺数</div>
          <div class="number">{{ kpiReportList.threeComplete || 0 }}</div>
        </div>
        <div class="item_2_wrap">
          <div class="title">三季度未完成指标店铺数</div>
          <div class="number">{{ kpiReportList.threeNotComplete || 0 }}</div>
        </div>
      </div>
      <div class="info_item_wrap">
        <div class="item_1_wrap">
          <div class="title">本年完成指标店铺数</div>
          <div class="number">{{ kpiReportList.yearComplete || 0 }}</div>
        </div>
        <div class="item_2_wrap">
          <div class="title">本年未完成指标店铺数</div>
          <div class="number">{{ kpiReportList.yearNotComplete || 0 }}</div>
        </div>
      </div>
    </div>
    <div class="info_bottom">
      <div class="info_item_wrap mr16">
        <div class="item_1_wrap">
          <div class="title">本期客单件</div>
          <div class="number">{{ kpiReportList.customerOneSingle || 0 }}</div>
        </div>
        <div class="item_1_wrap">
          <div class="title">同期客单价</div>
          <div class="number">
            {{ kpiReportList.tongCustomerOneSingle || 0 }}
          </div>
        </div>
      </div>
      <div class="info_item_wrap mr16">
        <div class="item_1_wrap">
          <div class="title">本期客单价</div>
          <div class="number">{{ kpiReportList.customerOnePrice || 0 }}</div>
        </div>
        <div class="item_1_wrap">
          <div class="title">同期客单价</div>
          <div class="number">
            {{ kpiReportList.tongCustomerOnePrice || 0 }}
          </div>
        </div>
      </div>
      <div class="info_item_wrap mr16">
        <div class="item_1_wrap">
          <div class="title">本期折扣</div>
          <div class="number">{{ kpiReportList.discount || 0 }}</div>
        </div>
        <div class="item_1_wrap">
          <div class="title">同期折扣</div>
          <div class="number">{{ kpiReportList.tongDiscount || 0 }}</div>
        </div>
      </div>
      <div class="info_item_wrap mr16">
        <div class="item_1_wrap">
          <div class="title">本期连带率</div>
          <div class="number">{{ kpiReportList.associateRate || 0 }}%</div>
        </div>
        <div class="item_1_wrap">
          <div class="title">同期连带率</div>
          <div class="number">{{ kpiReportList.tongAssociateRate || 0 }}%</div>
        </div>
      </div>
      <div class="info_item_wrap">
        <div class="item_1_wrap">
          <div class="title">近三天未开单店铺数</div>
          <div class="number">{{ kpiReportList.threeDayUnopened || 0 }}</div>
        </div>
      </div>
    </div>
    <div class="tabs_wrap">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="月累业绩明细表" name="first">
          <month></month>
        </el-tab-pane>
        <el-tab-pane label="日累业绩明细表" name="second">
          <day></day>
        </el-tab-pane>
        <el-tab-pane label="同期" name="third" style="width: 100%">
          <sameTime></sameTime>
        </el-tab-pane>
        <el-tab-pane label="近三天未开单店铺" name="fourth">
          <shop></shop>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { kpiReport } from '@/request/store/K_PerformanceAnalysis'
import { getMonth, deepClone } from '@/util/util'
import month from './month.vue'
import day from './day.vue'
import shop from './shop.vue'
import sameTime from './sameTime.vue'
export default {
  name: 'KPIAnalysis',
  components: { month, day, shop, sameTime },
  data() {
    return {
      activeName: 'first',
      dateTime: '',
      kpiReportList: {}
    }
  },
  created() {
    this.dateTime = getMonth()
    this.kpiReport(this.dateTime)
  },
  methods: {
    async kpiReport(month) {
      const { data } = await kpiReport({ month })
      if (data && data.code === 200) {
        this.kpiReportList = data.data
        // console.log(this.kpiReportList)
      }
    },
    handleClick(tab) {
      this.activeName = tab.name
    },
    changeDate(date) {
      this.dateTime = date
    }
  }
}
</script>

<style lang="less" scoped>
.KPIAnalysis_wrap {
  // .picker_data {
  //   height: 32px;
  //   /deep/.el-input__inner {
  //     height: 32px;
  //   }
  //   /deep/.el-input__icon {
  //     line-height: 32px;
  //   }
  // }
  .info_top {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
    .info_item_wrap {
      flex: 1;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      border-radius: 16px;
      height: 100px;
      background-color: #f7f7f7;
      .item_1_wrap {
        text-align: center;
        .title {
          color: #868686;
        }
        .number {
          font-size: 20px;
          font-weight: 700;
          color: #017aff;
        }
      }
      .item_2_wrap {
        text-align: center;
        .title {
          color: #868686;
        }
        .number {
          font-size: 20px;
          font-weight: 700;
          color: #fb4c4c;
        }
      }
    }
    .mr16 {
      margin-right: 16px;
    }
  }
  .info_bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
    .info_item_wrap {
      // width: 200px;
      flex: 1;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      border-radius: 16px;
      height: 100px;
      background-color: #f7f7f7;
      .item_1_wrap {
        text-align: center;
        .title {
          color: #868686;
        }
        .number {
          font-size: 20px;
          font-weight: 700;
          color: #017aff;
        }
      }
    }
    .mr16 {
      margin-right: 16px;
    }
  }
  .tabs_wrap {
    margin-top: 30px;
  }
}
</style>
